<template>
  <!-- <Banner /> -->

  <Container padding-top="0" padding-bottom="0">
    <template v-if="isMounted && data">
      <div class="news-detail-page">
        <div class="left">
          <h1>{{ data.title }}</h1>
          <div class="time">
            <IconTime />
            <span>{{ $t("tag.publish_time") }}：{{ data.create_time }}</span>
          </div>
          <div class="content">
            <p class="raw-html" v-html="data.describe"></p>
            <p class="raw-html" v-html="data.content"></p>
            <div class="footer-img">
              <img :src="data.single_pic" alt="" />
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </template>
    <template v-else>
      <div class="news-detail-page-skeleton">
        <div class="pc-skeleton">
          <Skeleton :rows="6"></Skeleton>
        </div>
        <div class="mobile-skeleton">
          <Skeleton :rows="10" mobile></Skeleton>
        </div>
      </div>
    </template>
  </Container>
</template>

<script setup lang="ts">
import { onBeforeMount, nextTick, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { postNewsView } from "../../api/news";

const router = useRoute();
const id = router.query.id;

const data = ref();

const getNewsDetail = async () => {
  let res = await postNewsView(id);
  data.value = res.data;
};
const isMounted = ref(false);
onMounted(async () => {
  await nextTick();
  isMounted.value = true;
  getNewsDetail();
});
</script>
<style scoped lang="less">
.news-detail-page-skeleton {
  margin: 123px 0;
}
@media screen and (min-width: 768px) {
  .news-detail-page-skeleton {
    margin-top: 40px;
  }
}
.news-detail-page {
  @media screen and (min-width: 768px) {
    margin-top: 80px;
  }
  display: flex;
  font-family: "Opensans-Regular";
  color: rgb(51, 51, 51);
  .left {
    border-bottom: 1px solid #ededee;
    font-size: 18px;
    flex: 1;
    h1 {
      text-align: center;
      font-size: 28px;
      font-weight: bold;
    }
    .time {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      color: #969696;
      font-size: 16px;
      margin-top: 16px;
      margin-bottom: 40px;
    }
    .content {
      * {
        background-color: transparent !important;
        display: block;
      }
      .footer-img {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          height: 100%;
          width: auto;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .news-detail-page {
    .left {
      padding: 82px 0;
      h1 {
        text-align: center;
        font-size: 82px;
        font-weight: bold;
        margin-bottom: 82px;
      }
      .content * {
        font-size: 72px !important;
      }
    }
  }
}
</style>
